<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>咖啡下午茶</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/goodsList.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/css_pc_init.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="header-nav">
                <h1 class="header-logo">
                    <a href="index.html">
                        <img src="../images/logo.png" alt="21cake logo" />
                    </a>
                </h1>
                <ul class="nav-box">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="cake.html" target="_self">蛋糕</a></li>
                    <li><a href="bread.html" target="_self">面包</a></li>
                    <li><a href="ice-cream.html" target="_self">冰淇淋</a></li>
                    <li><a href="coffee-tea.html" target="_self">咖啡下午茶</a></li>
                    <li><a target="_self">咖啡全国送</a></li>
                    <li><a target="_self">企业专区</a></li>
                </ul>
                <div class="right-city-user">
                    <a class="header-app app-download">APP下载</a>
                    <div class="current-city">上海<i></i></div>
                    <a class="header-message">消息</a>
                    <span class="not-login"><a href="login.html">登录</a>/<a href="register.html">注册</a></span>
                    <a class="header-user">
                        <img src="../images/user-img.png" alt="21cake user icon" />
                    </a>
                    <a href="cart.html" class="header-cart">
                        <i></i>
                    </a>
                    <ul class="current-city-list  header-select">
                        <li><a href="javascript:void(0);" class="city-id-1">上海</a></li>
                        <li><a href="javascript:void(0);" class="city-id-2">北京</a></li>
                        <li><a href="javascript:void(0);" class="city-id-3">天津</a></li>
                        <li><a href="javascript:void(0);" class="city-id-4">杭州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-5">无锡</a></li>
                        <li><a href="javascript:void(0);" class="city-id-6">苏州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-7">广州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-8">深圳</a></li>
                    </ul>
                    <ul class="header-user-list  header-select">
                        <li><a target="_blank">我的订单</a></li>
                        <li><a target="_blank">我的优惠券</a></li>
                        <li><a target="_blank">我的纪念日</a></li>
                        <li><a class="logout" target="_self">退出登录</a></li>
                    </ul>
                    <ul class="message-list-header  header-select">
                        <li><a target="_blank">通知</a></li>
                        <li><a target="_blank">物流</a></li>
                    </ul>
                    <dl class="app-list  header-select">
                        <dt>
                            <img src="../images/footer-erweima.png" alt="下载APP" />
                        </dt>
                        <dd>下载享更多优惠</dd>
                    </dl>
                </div>
            </div>
        </div>
    </header>

    <div class="content-box">
        <div class="pro-list-content">
            <div class="pro-list-filter">
                <dl class="cat-list">
                    <dt>分类：</dt>
                    <dd data-name=""><a href="javascript:void(0);">全部分类</a></dd>
                    <dd class="sub-cat" data-name="蛋糕"><a>蛋糕</a></dd>
                    <dd class="sub-cat" data-name="冰淇淋"><a>冰淇淋</a></dd>
                    <dd class="sub-cat active" data-name="咖啡下午茶"><a>咖啡下午茶</a></dd>
                    <dd class="sub-cat" data-name="常温cake"><a>常温蛋糕</a></dd>
                    <dd class="sub-cat" data-name="设计师礼品"><a>设计师礼品</a></dd>
                    <dd class="sub-cat" data-name="面包"><a>面包</a></dd>
                </dl>
                <dl class="tag-list"><dt>口味：</dt>
                    <dd class="active tag-title" data-taste=""><a href="javascript:void(0);">全部口味</a></dd>
                    <dd class="sub-tag sub-tag-1 disabled" data-taste="乳脂奶油"><a>乳脂奶油</a></dd>
                    <dd class="sub-tag sub-tag-2 disabled" data-taste="慕斯"><a>慕斯</a></dd>
                    <dd class="sub-tag sub-tag-3 disabled" data-taste="乳酪"><a>乳酪</a></dd>
                    <dd class="sub-tag sub-tag-5 disabled" data-taste="巧克力"><a>巧克力</a></dd>
                    <dd class="sub-tag sub-tag-6 disabled" data-taste="坚果"><a>坚果</a></dd>
                    <dd class="sub-tag sub-tag-7 disabled" data-taste="水果"><a>水果</a></dd>
                    <dd class="sub-tag sub-tag-8 disabled" data-taste="含酒"><a>含酒</a></dd>
                    <dd class="sub-tag sub-tag-9 disabled" data-taste="咖啡"><a>咖啡</a></dd>
                    <dd class="sub-tag sub-tag-4 disabled" data-taste="冰淇淋"><a>冰淇淋</a></dd>
                </dl>
            </div>

            <div class="search-sort-box cl">
                <div class="sort-box">价格<i class="asc"></i></div>
                <div class="input-group">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon"><a><i class="glyphicon glyphicon-search"> <span>搜索</span></i></a></span>
                </div>
            </div>

            <div class="pro-list-box">
                <ul class="pro-list-pr">
                </ul>
            </div>

            <div class="page-box">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <footer>
        <div class="footer">
            <img class="footer-logo" src="../images/footer-logo.png" height="36" width="96" alt="">
            <div class="footer-nav">
                <a>联系我们</a>
                <span>|</span>
                <a>订购帮助</a>
                <span>|</span>
                <a>企业合作</a>
                <span>|</span>
                <a>生产经营资质</a>
                <span>|</span>
                <a>公告专区</a>
            </div>
            <div class="footer-icon">
                <a href="http://weibo.com/21cake" target="_blank">
                    <img src="../images/footericon-01.png">
                </a>
                <a class="footer-weixin">
                    <div class="footer-erweima footer-weixin-erweima">
                        <img src="../images/erweima.png">
                    </div>
                    <img src="../images/footericon-02.png">
                </a>
                <a class="footer-app">
                    <div class="footer-erweima footer-app-erweima">
                        <img src="../images/footer-erweima.png">
                    </div>
                    APP
                </a>
            </div>

            <div class="footer-text">
                <span>订购专线：400 650 2121（服务时间 08:00–22:00）</span>
                <span>客服电话：021-23099721（全国） | kefu@21cake.com（邮箱）</span>
                <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
                <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
            <div class="footer-copyright">
                <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
        </div>
    </footer>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/header.js"></script>
<script src="../js/login.js"></script>
<script src="../js/cookie.js"></script>
<script>
    //以什么字段排序
    var orderKey = "goods_price";
    //排序方式，默认为asc 升序
    var sortKey = "asc";
    //显示几条数据
    var pageNum = 8;
    //当前页数下标，起始为0
    var pageIndex = 0;

    //头部的显隐事件
    header();

    //登录事件
    login();

    //分类点击事件
    $(".cat-list dd").not(".disabled").click(function () {
        $(".tag-list dd").removeClass("active");
        $(".tag-title").addClass("active");
        $(".cat-list dd").removeClass("active");
        $(this).addClass("active");
        if ($(this).find("a").html() === "全部分类") {
            $(".sub-tag").removeClass("disabled");
        } else if ($(this).find("a").html() === "蛋糕") {
            $(".sub-tag").removeClass("disabled");
        } else if ($(this).find("a").html() === "冰淇淋") {
            $(".sub-tag").addClass("disabled");
            $(".sub-tag-4").removeClass("disabled");
        } else if ($(this).find("a").html() === "咖啡下午茶") {
            $(".sub-tag").addClass("disabled");
        } else if ($(this).find("a").html() === "常温蛋糕") {
            $(".sub-tag").addClass("disabled");
        } else if ($(this).find("a").html() === "设计师礼品") {
            $(".sub-tag").addClass("disabled");
        } else if ($(this).find("a").html() === "面包") {
            $(".sub-tag").addClass("disabled");
        }
        $(".sort-box i").removeClass("asc");
        $(".sort-box i").removeClass("desc");
        $(".sort-box i").addClass("asc");
        pageIndex = 0;
        sortKey = "asc";
        resetSort();
        goodsData();
        page();
    });
    //口味点击事件
    $(".tag-list dd").not(".disabled").click(function () {
        $(".tag-list dd").removeClass("active");
        $(this).addClass("active");
        goodsData();
        pageIndex = 0;
        sortKey = "asc";
        resetSort();
        goodsData();
        page();
    });

    //价格排序点击事件
    $(".sort-box").click(function () {
        $(".sort-box i").removeClass("asc");
        $(".sort-box i").removeClass("desc");
        if (sortKey === "asc") {
            $(".sort-box i").addClass("desc");
            sortKey = "desc";
            goodsData();
        } else {
            $(".sort-box i").addClass("asc");
            sortKey = "asc";
            goodsData();
        }
    });

    function resetSort(){
        $(".sort-box i").removeClass("asc");
        $(".sort-box i").removeClass("desc");
        if (sortKey === "asc") {
            $(".sort-box i").addClass("asc");
        } else {
            $(".sort-box i").addClass("desc");
        }
    }

    //搜索事件
    $(".input-group-addon").click(function () {
        page();
    });


    //商品的数据绑定
    function goodsData() {
        $.ajax({
            type: "get",
            url: "../php/goods_list.php",
            data: {
                orderkey: "goods_price",
                sortkey: sortKey,
                pagenum: pageNum,
                skipnum: pageIndex * pageNum,
                goods_type: $(".cat-list .active").attr("data-name"),
                taste: $(".tag-list .active").attr("data-taste"),
                name: $(".form-control").val()
            },
            dataType: "json",
            success: function (list) {
                let html = "";
                for (var attr in list) {
                    let goods_id = list[attr]["goods_id"];
                    let goods_name = list[attr]["goods_name"];
                    let goods_sket = list[attr]["goods_sket"];
                    let goods_price = list[attr]["goods_price"];
                    let goods_smallimg = list[attr]["goods_smallimg"];
                    let measure = list[attr]["measure"];
                    let measure_id = list[attr]["measure_id"];

                    html += `
                <li>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <img class="lazy" src="../images/${goods_smallimg}">
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <h6>${goods_name}</h6>
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <p>${goods_sket}</p>
                    </a>
                    <div class="tag-list">
                        <a target="_blank">人气 &gt;</a>
                        <a target="_blank">聚会 &gt;</a>
                    </div>
                    <div class="cart-info">
                        <span class="spec">￥${goods_price}/${measure}</span>
                        <a href="javascript:void(0);" class="add-cart">加入购物车</a>
                    </div>
                    <div class="spec-detail">
                        <div class="spec-title">￥${goods_price}/${measure}</div>
                        <div class="spec-info">
                            <a href="javascript:void(0);" class="active" data-measure="${measure_id}">${measure}
                                <i></i>
                            </a>
                        </div>
                        <div class="buttons">
                            <div class="button left buy-now" onclick="addShoppingCart(this,'${goods_id}')">立即购买</div>
                            <div class="button coffee right add-to-cart" onclick="addShoppingCart(this,'${goods_id}')">加入购物车</div>
                        </div>
                    </div>
                    <div class="addcart-success">
                        <div>
                            <p><i></i>成功添加购物车</p>
                            <a href="cart.html" class="button" target="_blank">查看购物车</a>
                        </div>
                    </div>
                </li>
            `;
                }
                $(".pro-list-pr").html(html);
                //加入购物车事件
                $(document).click(function () {
                    $(".spec-detail").hide();
                });
                $(".spec-detail").click(function (e) {
                    e.stopPropagation();
                });
                $(".add-cart").click(function (e) {
                    e.stopPropagation();
                    $(".spec-detail").hide();
                    $(this).parent().next().show();
                    $(".spec-detail .spec-info i").css("display", "none");
                    $(".spec-detail .spec-info .active i").css("display", "block");
                    $(".spec-detail .spec-info a").click(function () {
                        $(this).parent().children().removeClass("active");
                        $(this).addClass("active");
                        $(".spec-detail .spec-info .active i").css("display", "block");
                    });
                });
            }
        });
    }

    page();
    function page() {
        $.ajax({
            type: "get",
            url: "../php/count.php",
            data: {
                name: $(".form-control").val(),
                taste: $(".tag-list .active").attr("data-taste"),
                goods_type: $(".cat-list .active").attr("data-name")
            },
            dataType: "json",
            success: function (obj) {
                if (obj["code"] === 1) {
                    var total = obj["count"];
                    var showNum = pageNum;
                    var showPage = 5;
                    var pageCount = Math.ceil(total / showNum);
                    var pageSub = 1;
                    bindData();
                    function bindData() {
                        var end = pageCount > showPage ? showPage : pageCount;
                        var middle = Math.floor(showPage / 2);
                        var start = 1;
                        if (pageSub > middle) {
                            start = pageSub - middle;
                            end = pageSub + middle;
                        }

                        if (pageSub >= pageCount - middle) {
                            start = pageCount - middle * 2;
                            end = pageCount;
                        }
                        start = start <= 1 ? 1 : start;

                        $(".numLi").remove();
                        for (var i = start; i <= end; i++) {
                            let pageHtml = `<li class="numLi"><span>${i}</span></li>`;
                            $(".pagination").append(pageHtml)
                            if (i === pageSub) {
                                $(".numLi").eq(i - 1).addClass("active");
                            }
                            $(".numLi").eq(i - 1).click(function () {
                                pageSub = $(this).children().html() * 1;
                                bindData();
                            });
                        }
                        pageIndex = pageSub - 1;
                        goodsData();
                    }
                }
            }
        });
    }

    //加入购物车
    function addShoppingCart(object, id) {
        if (getCookie("t_cake_userId")) {
            let goodsnum = 1;
            $.ajax({
                type: "get",
                url: "../php/addcart.php",
                data: {
                    userid: getCookie("t_cake_userId"),
                    goodsid: id,
                    measure_id: $(object).parent().prev().children().filter(".active").attr("data-measure"),
                    birthday_card: "选择生日牌",
                    goodsnum: goodsnum
                },
                dataType: "json",
                success: function (obj) {
                    $(object).parent().parent().hide();
                    if ($(object).hasClass("buy-now")) {
                        location.href = "cart.html";
                    }
                    $(object).parent().parent().next().show(function () {
                        setTimeout(() => {
                            $(".addcart-success").hide();
                        }, 3000);
                    });
                }
            });
        } else {
            setCookie("historyURL",location.href,7);
            location.href = "login.html";
        }
    }

</script>

</html>